const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    cleanCss = require('gulp-clean-css'),
    autoprefixer = require('gulp-autoprefixer'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    connect = require('gulp-connect'),
    sass = require('gulp-sass'),
    del = require('del')


const path = {
    html:{
        src:'src/**/*.html',
        dest:'dist'
    },
    css:{
        src:'src/css/**/*.scss',
        dest:'dist/css'
    },
    js:{
        src:"src/js/**/*.js",
        dest:'dist/js'
    },
    img:{
        src:'src/images/**/*',
        dest:'dist/images'
    },
    libs:{
        src:'src/libs/**/*',
        dest:"dist/libs"
    }
}

const delDist=()=>del('dist')

const html = () => {
    // ** 所有目录
    // * 所有文件
    return gulp.src(path.html.src)
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
        	collapseWhitespace: true,//压缩HTML
        	collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      		removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      		removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      		removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      		minifyJS: true,//压缩页面JS
      		minifyCSS: true//压缩页面CSS
        }))
        .pipe(gulp.dest(path.html.dest))
        .pipe(connect.reload())
}
const css = ()=>{
    return gulp.src(path.css.src)
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
        .pipe(connect.reload())
}

const js = ()=>{
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest))
        .pipe(connect.reload())
}

const img=()=>{
    return gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))
}
const libs=()=> gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

const server =()=>{
    connect.server({
        root:'dist',
        port:'2333',
        livereload:true

    })

}


// watch 监听文件的改变，当文件内容发生改变重启对应任务
const watch = ()=>{
    gulp.watch(path.html.src,html)
    gulp.watch(path.css.src,css)
    gulp.watch(path.js.src,js)
}

const ico = () => {
    gulp.src('src/favicon.ico').pipe(gulp.dest('dist'))
}


// module.exports = {
//     html,
//     css,
//     js,
//     img,
//     libs,
//     delDist,
//     watch,
//     server
// }

module.exports.default = gulp.series(delDist,gulp.parallel(html,js,css,img,libs,watch,server,ico))